<#assign pageTitle = "个人中心" />
<#assign pageHeader>
    <script type="text/javascript" src="/static/js/uc-dialog.js"></script>
</#assign>
<#assign pageContent>
    <article class="w80 fl">
        <div class="u-r-cont-top-w">
            <section>
                <section class="u-r-tit-all clearfix">
                    <h2 class="clearfix fl">
                        <span class="unFw current">近期学习</span>
                    </h2>
                </section>
                <section class="">
                    <div class="u-r-all-box">
                        <#if !lastStudyCourse??>
                        <section class="no-data-wrap">
                            <em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">还没有开始学习哦！~<a href="/course/list.html" class="c-master">马上去学习</a></span>
                        </section>
                        </#if>
                        <#if lastStudyCourse??>
                        <section class="u-cous-inf-warp u-cous-inf-warp-index">
                            <article class="u-c-inf-pic">
                                    <#if lastStudyCourse.cover??>
                                        <img src="${staticSite}${lastStudyCourse.cover}" class="img-responsive" alt="${lastStudyCourse.courseName}" />
                                    <#else>
                                        <img src="/static/qdxwx/img/coures.gif" class="img-responsive" alt="${lastStudyCourse.courseName}" />
                                </#if>
                            </article>
                            <section class="hLh20 txtOf name">
                                <span class="fsize14 c-333 f-fM">
                                     <#if lastStudyCourse.sellType=='COURSE'>
                                         <tt class="c-master fsize14 f-fM">[ 录播课 ]&nbsp;</tt>
                                     </#if>
                                    <#if lastStudyCourse.sellType=='LIVE'>
                                        <tt class="c-master fsize14 f-fM">[ 直播 ]&nbsp;</tt>
                                    </#if>
                                    <#if lastStudyCourse.sellType=='PACKAGE'>
                                        <tt class="c-master fsize14 f-fM">[ 套餐 ]&nbsp;</tt>
                                    </#if>
                                    ${lastStudyCourse.courseName}
                                </span>
                            </section>
                            <section class="hLh20 mt5 of">
                                 <span class="">
                                      <tt class="fsize14 c-666 f-fM vam">主讲：</tt>
                                     <#list lastStudyCourse.teacherList as teacher>
                                         <tt class="fsize14 c-666 f-fM vam ">${teacher.name!}</tt>
                                     </#list>
                                 </span>
                            </section>
                            <section class="hLh20 mt10 of">
                                 <span class="fl u-tc-teach">
                                      <tt class="fsize14 c-666 f-fM vam">价格：</tt>
                                      <tt class="fsize18 c-master f-fM vam ">￥${lastStudyCourse.price/100}</tt>
                                 </span>
                            </section>
                            <section class="of hLh30 uc-c-infor-jd mt-20">
                                <div class="jdt-i-r clearfix">
                                    <div class="fl fsize14 c-666 f-fM">学习进度：</div>
                                    <div class="time-bar-wrap fl">
                                        <div class="lev-num-wrap" title="已学${lastStudyCourse.studyPercent}%">
                                            <aside class='lev-num-bar <#if (lastStudyCourse.studyPercent?number >= 100)>bg-orange</#if> <#if lastStudyCourse.studyPercent?number <100>bg-green</#if>' style="width: ${lastStudyCourse.studyPercent}%;"></aside>
                                            <span class="lev-num"><big>${lastStudyCourse.studyPercent}%</big>/<small>100%</small></span>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </section>
                        <div class="">
                            <div class="u-r-all-box u-r-all-box-in">
                                <section class="mt20 mb40">
                                    <section class="">
                                        <h6 class="c-g-content c-infor-title">
                                            <span>章节进度</span>
                                        </h6>
                                        <article class="dqkc-list mb30">
                                            <div class="clearfix cous-new-late">
                                                <span class="fl vam">
                                                    <em class="icon20 c-n-la-ico"> </em>
                                                    <tt class="vam fsize16 c-master f-fM">${lastStudyCourse.courseStudyHistory.nodeName}</tt>
                                                </span>
                                                <span class="fr vam mr20">

                                                    <a id="playNodeId402" class="cou-kscp" target="_blank" href="/user/course/play.html?nodeId=${lastStudyCourse.courseStudyHistory.nodeId}" title="继续学习">继续学习 </a>
                                                </span>
                                            </div>
                                        </article>
                                    </section>
                                </section>
                            </div>
                        </div>
                        </#if>
                    </div>
                </section>
            </section>
        </div>
        <div class="u-r-cont">
            <section class="">
                <form id="searchForm" method="post" action="/user/index.html">
                    <input type="hidden" id="pageCurrentPage" name="page" value="1" />
                    <input type="hidden" id="courseType" name="courseType" value="${courseType!"0"}">
                    <input type="hidden" id="isOverdue" name="isOverdue" value="${isOverdue!"0"}">
                </form>
                <div>
                    <section class="u-r-tit-all clearfix">
                        <h2 class="fl unFw m-xl-ashow">
                            <a href="javascript:void (0)" id="selectCOURSE" onclick="selectSelfCourse('COURSE')" title="录播课程" >录播课程</a>
                            <#if serviceSwitch.live=='ON'>
                                <a href="javascript:void (0)" id="selectLIVE" onclick="selectSelfCourse('LIVE')" title="直播课程" >直播课程</a>
                            </#if>
                            <a href="javascript:void (0)" id="selectOVER" title="过期课程" onclick="selectSelfCourse('OVER')" >过期课程</a>
                        </h2>
                        <#if serviceSwitch.courseCard=='ON'>
                            <section class="u-o-right fr tar mr20 mt13">
                                <a class="cou-kscp" href="javascript:void (0)" onclick="activeCourseCard()" title="课程卡兑换">课程卡兑换</a>
                            </section>
                        </#if>
                    </section>
                </div>
                <div class="uc-index-warp" id="aCoursesList">
                    <#if courseList?? && courseList?size gt 0>
                        <div class="u-i-cou-warp">
                            <#if courseType!='LIVE'>
                                <#list courseList as course>
                                    <dl>
                                        <dd class="u-order-list">
                                            <section class="w50pre disIb vam u-o-left">
                                                <div class="u-o-l-infor">
                                                    <div class="c-cou-item">
                                                        <div class="">
                                                            <div>
                                                                    <!-- 跳转课程详情页面-->
                                                                <a class="u-ol-pic u-ol-pic-new"
                                                                        <#if isOverdue==1>
                                                                            href="/course/view/${course.courseId}.html"
                                                                        <#else>
                                                                            href="/user/course/info.html?id=${course.courseId}"
                                                                        </#if>
                                                                   title="">
                                                                        <#if course.cover??>
                                                                            <img src="${staticSite}${course.cover}" class="img-responsive" alt="${course.courseName}" />
                                                                        <#else>
                                                                            <img src="/static/qdxwx/img/coures.gif" class="img-responsive" alt="${course.courseName}" />
                                                                        </#if>
                                                                </a>
                                                                <h6 class="hLh30 txtOf name">
                                                                    <a
                                                                            <#if  isOverdue==1>
                                                                                href="/course/view/${course.courseId}.html"
                                                                            <#else>
                                                                                href="/user/course/info.html?id=${course.courseId}"
                                                                            </#if>
                                                                            title="${course.courseName}" class="fsize16 c-333">

                                                                        <#if course.sellType=='COURSE'>
                                                                            <tt class="c-master fsize16 f-fM">[ 录播 ]&nbsp;</tt>
                                                                        </#if>
                                                                            ${course.courseName}
                                                                    </a>
                                                                </h6>
                                                                <section class="hLh20 mt10 of">
                                                                    <span class="fl">
                                                                        <tt class="fsize13 c-999 f-fM vam">课时：</tt>
                                                                        <tt class="fsize13 c-999 f-fM vam">${course.lessonNum}</tt>
                                                                    </span>
                                                                    <span class="fr">
                                                                        <tt class="fsize13 c-999 f-fM vam">有效期：</tt>
                                                                        <span style="color: #dd491f"> ${course.expireDate!} </span>
                                                                    </span>
                                                                </section>
                                                                <section class="hLh20 mt10 of">
                                                                    <#if course.courseStudyHistory??>
                                                                         <span class="">
                                                                            <tt class="fsize13 c-999 f-fM vam">已学至：</tt>
                                                                            <tt class="fsize13 c-999 f-fM vam">${course.courseStudyHistory.nodeName!}</tt>
                                                                        </span>
                                                                    <#else>
                                                                        <span>
                                                                             <tt class="fsize13 c-999 f-fM vam">还没开始学习</tt>
                                                                        </span>
                                                                    </#if>
                                                                </section>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                            <section class="disIb vam u-i-jdbox w25 tac mb15">
                                                <div class="clearfix">
                                                    <div class="disIb vam ml30 new-u-i-jdt-name">
                                                        <span class="c-999 f-fM fsize14">总进度：</span>
                                                    </div>
                                                    <div class="disIb vam new-u-i-jdt">
                                                        <div class="time-bar-wrap">
                                                            <div class="lev-num-wrap" title="已学${course.studyPercent!0}%">
                                                                <aside class='lev-num-bar <#if (course.studyPercent?number >= 100)>bg-orange</#if> <#if course.studyPercent?number lt 100>bg-green</#if>' style="width: ${course.studyPercent}%;"></aside>
                                                                <span class="lev-num"><big>${course.studyPercent}%</big>/<small>100%</small></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                            <section class="w20 disIb vam u-o-right">
                                                <div class="tar u-o-r-btn-infor">
                                                    <p class="mb20">
                                                        <a href="/user/course/info.html?id=${course.courseId}" class="cou-kscp" title="查看详情">查看详情</a>
                                                    </p>
                                                </div>
                                            </section>
                                            <div class="clear"></div>
                                        </dd>
                                    </dl>
                                </#list>
                            </#if>
                            <!--如果是直播课-->
                            <#if courseType=='LIVE'>
                                <#list courseList as course>
                                    <dl>
                                        <dd class="u-order-list">
                                            <section class="w50 disIb vam u-o-left">
                                                <div class="u-o-l-infor">
                                                    <div class="c-cou-item">
                                                        <div class="">
                                                            <div>
                                                                <!-- 跳转课程详情页面-->
                                                                <a class="u-ol-pic u-ol-pic-new"
                                                                        <#if isOverdue==1>
                                                                            href="/live/view/${course.courseId}.html"
                                                                        <#else>
                                                                            href="/user/course/info.html?id=${course.courseId}"
                                                                        </#if>
                                                                   title="">
                                                                    <#if course.cover??>
                                                                        <img src="${staticSite}${course.cover}" class="img-responsive" alt="${course.courseName}" />
                                                                    <#else>

                                                                        <img src="/static/qdxwx/img/coures.gif" class="img-responsive" alt="${course.courseName}" />
                                                                    </#if>
                                                                </a>
                                                                <h6 class="hLh30 txtOf name">
                                                                    <a
                                                                            <#if isOverdue==1>
                                                                                href="/live/view/${course.courseId}.html"
                                                                            <#else>
                                                                                href="/user/course/info.html?id=${course.courseId}"
                                                                            </#if>
                                                                            title="${course.courseName}" class="fsize16 c-333">

                                                                        <#if course.sellType=='COURSE'>
                                                                            <tt class="c-master fsize16 f-fM">[ 录播课 ]&nbsp;</tt>
                                                                        </#if>
                                                                        <#if course.sellType=='LIVE'>
                                                                            <tt class="c-master fsize16 f-fM">[ 直播 ]&nbsp;</tt>
                                                                        </#if>
                                                                        ${course.courseName}
                                                                    </a>
                                                                </h6>
                                                                <section class="hLh20 mt10 of">
                                                                <span class="fr">
                                                                    <tt class="fsize13 c-999 f-fM vam">课时：</tt>
                                                                    <tt class="fsize13 c-999 f-fM vam">${course.lessonNum}</tt>
                                                                </span>
                                                                    <span class="fl">
                                                                    <tt class="fsize13 c-999 f-fM vam">价格：</tt>
                                                                    <tt class="fsize16 c-master f-fM vam">￥${course.price/100}</tt>
                                                                </span>
                                                                </section>
                                                                <section class="hLh20 mt10 of">
                                                                <span class="u-tc-time-live">
                                                                    <tt class="fsize13 c-999 f-fM vam">直播日期：</tt>
                                                                    <tt class="fsize13 c-333 f-fM vam ">
                                                                       ${course.liveBeginTime?string("yyyy-MM-dd")}
                                                                        ~
                                                                        ${course.liveEndTime?string("yyyy-MM-dd")}
                                                                    </tt>
                                                                </span>
                                                                </section>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                            <section class="disIb vam u-i-jdbox w30 tac mb15">
                                                <div class="clearfix">
                                                    <div class="disIb vam ml30 new-u-i-jdt-name">
                                                        <span class="c-999 f-fM fsize14">总进度：</span>
                                                    </div>
                                                    <div class="disIb vam new-u-i-jdt">
                                                        <div class="time-bar-wrap">
                                                            <div class="lev-num-wrap" title="已学${course.studyPercent}%">
                                                                <aside class='lev-num-bar <#if (course.studyPercent?number>=100)>bg-orange</#if> <#if course.studyPercent?number lt 100>bg-green</#if>' style="width: ${course.studyPercent}%;"></aside>
                                                                <span class="lev-num"><big>${course.studyPercent}%</big>/<small>100%</small></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                            <section class="w16 disIb vam u-o-right">
                                                <div class="tar u-o-r-btn-infor">
                                                    <p class="mb20">
                                                        <a href="/user/course/info.html?id=${course.courseId}" class="cou-kscp" title="查看详情">查看详情</a>
                                                    </p>
                                                </div>
                                            </section>
                                            <div class="clear"></div>
                                        </dd>
                                    </dl>
                                </#list>
                            </#if>
                        </div>
                        <div class="paging" id="showPages"></div>
                    <#else>
                        <section class="no-data-wrap">
                            <#if isOverdue ==1>
                                <em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有过期课程！</span>
                            <#else>
                                <em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">您还没有开始学习课程，快去<a href="/course/list.html" class="c-master f-fM fsize14">选择要学习的课程</a>吧！</span>
                            </#if>
                        </section>
                    </#if>
                </div>
            </section>
            <!-- /我的课程 -->
        </div>
    </article>
</#assign>
<#assign pageFooter>
    <script type="text/javascript" src="/static/js/course/course-uc.js"></script>
    <script>
        $(function () {
            var courseType = '${courseType!}';
            var isOverdue = '${isOverdue!}';
            /*是否查询的过期课程*/
            if (isOverdue === "1") {
                $("#selectOVER").addClass("current");
                $("#mobileSelectOVER").addClass("m-current");
                $(".mTitle").text("过期课程");
            }  else if (courseType === "COURSE") {
                $("#select" + courseType).addClass("current");
                $("#mobileSelect" + courseType).addClass("m-current");
                /*移动端筛选标题*/
                $(".mTitle").text("录播课程");
            } else if (courseType === "LIVE") {
                $("#select" + courseType).addClass("current");
                $("#mobileSelect" + courseType).addClass("m-current");
                /*移动端筛选标题*/
                $(".mTitle").text("直播课程");
            }
        });
        /*导航按钮点击事件*/
        function selectSelfCourse(courseType) {
            if (courseType === "COURSE") {
                $("#courseType").val("COURSE");
                $("#isOverdue").val("0")
            }
            if (courseType === "LIVE") {
                $("#courseType").val("LIVE");
                $("#isOverdue").val("0")
            }
            if (courseType === "OVER") {
                $("#courseType").val("COURSE");
                $("#isOverdue").val("1")
            }
            $("#searchForm").submit();
        }
        /*直播列表展开隐藏*/
        function showTable(obj){
            if(!$(obj).hasClass("sch-open")){
                $(obj).addClass("sch-open");
                $(obj).parent().find("table").attr("style","display:none");
                $(obj).text("课程表展开∨");
            }else{
                $(obj).removeClass("sch-open");
                $(obj).parent().find("table").attr("style","display:table");
                $(obj).text("课程表收起∧");
            }
        }
    </script>
    <script type="text/javascript" src="/static/js/page.js"></script>
    <script type="text/javascript">
        var options = {
            currentPage : ${page.currentPage}
            ,totalPage : ${totalPages}
        };
        $(function () {
            showPages(options);
        });
    </script>
</#assign>
<#include "../layouts/layout_uc.ftl">